import { IThemeColor } from '../../../../type/index';

export interface IRecruitmentCountParams {
  echarts: any;
  dom: HTMLElement;
  labelList: string[];
  valueList: number[];
  examValueList: number[];
  currentIndexCallBack: Function;
  themeColor: IThemeColor;
}

export const recruitmentCountChart = (props: IRecruitmentCountParams) => {
  const charts = props.echarts.init(props.dom);
  charts.setOption({
    title: {
      text: '每期招新总人数与参加招新考试人数统计',
      textStyle: {
        color: props.themeColor.font,
        fontSize: 16,
        fontWeight: 'normal',
      },
      padding: [16, 0, 0, 16],
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        crossStyle: {
          width: 1.4,
        },
        lineStyle: {
          width: 1.4,
        },
        textStyle: {
          color: props.themeColor.font,
        },
      },
    },
    grid: {
      top: '15%',
      bottom: '20%',
      left: '5%',
      right: '5%',
    },
    legend: {
      top: '5%',
      right: '5%',
      textStyle: {
        color: props.themeColor.font,
      },
      data: ['招新总人数', '参加招新考试人数'],
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: props.themeColor.border,
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        data: props.labelList,
      },
    ],

    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: props.themeColor.border,
          },
        },
        axisLine: {
          lineStyle: {
            color: props.themeColor.border,
          },
        },
        axisLabel: {
          fontSize: 16,
        },
      },
    ],
    dataZoom: [
      {
        show: true,
        height: 30,
        bottom: '5%',
        xAxisIndex: [0],

        start: 30,
        end: 100,
        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        handleSize: '110%',
        handleStyle: {
          // color: '#5B3AAE',
          color: '#6f7de3',
        },
        textStyle: {
          color: props.themeColor.font,
        },
        fillerColor: 'rgba(67,55,160,0.4)',
        borderColor: props.themeColor.border,
      },
    ],
    series: [
      {
        name: '招新总人数',
        type: 'line',
        smooth: true,
        symbolSize: 10,
        symbol: 'circle',
        // triggerLineEvent:true,
        itemStyle: {
          color: '#c257F6',
        },
        data: props.valueList,
      },
      {
        name: '参加招新考试人数',
        type: 'line',
        smooth: true,
        symbolSize: 10,
        symbol: 'circle',
        itemStyle: {
          color: '#6f7de3',
        },
        data: props.examValueList,
      },
    ],
  });

  let timer: number;
  let currentIndex = 0; //当前选中项在data数组中的下标
  charts.on('updateAxisPointer', function (event: any) {
    //过滤不在undefine的情况
    if (!event.dataIndex) return;
    //过滤多次移入相同项的情况
    if (currentIndex !== event.dataIndex) {
      //防抖函数，再次过滤移入不同只执行一次
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        currentIndex = event.dataIndex;
        props.currentIndexCallBack(currentIndex); //将下标回传到组件的方法中
      }, 400);
    }
  });
};
